<template>
  <div>
    <div
      :style="{ height: height, width: '99%' }"
      :id="id"
      class="report-echarts"
    ></div>
  </div>
</template>
<style scoped>
.report-echarts {
  position: relative;
  width: 98%;
}
.echarts-title {
  color: #184c97;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  position: relative;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<script>
import { echartsConfig } from "@/api";
export default {
  props: ["trendData"],
  data() {
    return {
      title: "到达海南整14天的用户数趋势",
      height: "400px",
      id: ""
    };
  },
  created() {
    this.id = "trend-" + Math.random();
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  watch: {
    trendData(value) {
      this.init();
    }
  },
  // updated() {
  //   this.$nextTick(() => {
  //     this.init();
  //   });
  // },
  methods: {
    init() {
      // debugger
      let xData = [];
      let yData = [];
      // this.trendData = [
      //   {
      //     name: "111",
      //     count: 200
      //   },
      //   {
      //     name: "222",
      //     count: 100
      //   },
      //   {
      //     name: "333",
      //     count: 500
      //   }
      // ];
      for (let i = 0; i < this.trendData.length; i++) {
        xData.push(this.trendData[i].name);
        yData.push(this.trendData[i].count);
      }
      let echartsData = {
        title: {
          // text: '域名安全事件统计', // this.displayItem.displayTitle,
          textStyle: {
            color: "#2648be",
            fontSize: 12
          }
        },
        //鼠标触发提示数量
        tooltip: {
          trigger: "axis"
        },
        grid: {
          top: "4%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        //x轴显示
        xAxis: {
          data: xData,
          boundaryGap: true,
          // name: '类型',
          axisLine: {
            lineStyle: {
              color: echartsConfig.lineColor,
              width: 1 //这里设置柱状的样式
            }
          },
          // 坐标轴的字体
          axisLabel: {
            textStyle: {
              color: echartsConfig.lineLabelColor
            }
          }
        },
        //y轴显示
        yAxis: {
          splitLine: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: echartsConfig.lineColor,
              width: 1 //这里设置柱状的样式
            }
          },
          // 坐标轴的字体
          axisLabel: {
            textStyle: {
              color: echartsConfig.lineLabelColor
            }
          }
          // name: '数量'
        },
        series: [
          {
            name: "数量",
            type: "line",
            symbol: "none",
            smooth: true,
            data: yData,
            //显示颜色
            itemStyle: {
              normal: {
                color: "#2593f3"
              }
            }
          }
        ]
      };
      var arriveFourteen = this.$echarts.init(document.getElementById(this.id));
      arriveFourteen.setOption(echartsData, true);
    }
  }
};
</script>
